import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

import i18n from '@/i18n'

// 本来饿了么ui 通过引入语言包, 在配置中设定 locale 来翻译
// Vue.use(ElementUI, {locale})
// 我们不想要饿了么自己翻译, 而是想将翻译的工作交给 i18n
Vue.use(ElementUI, {
  // i18n 是一个属性, 可以传入一个函数, 自动获取到当前饿了么想要翻译的key
  // 只需要在这个函数中返回, 对应的文字即可
  i18n: (key) => i18n.t(key)
})

import { imageerror } from '@/directives'
Vue.directive('imageerror', imageerror)

// 封装全局组件
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)
// 以上是普通的创建全局组件方法
// 如果是专业的第三方组件, 不会要求用户写这么多的代码引入组件
// 而是使用 Vue.use() 架构来实现
// 这个函数的德行就在于会自动运行传入参数对象里面的 install
// 注册之类的东西都可以放进里面
import Components from '@/components'
Vue.use(Components)

import Print from 'vue-print-nb'
Vue.use(Print)

// 过滤器
// 全局过滤器的创建方法是 Vue.filter(名称, 函数体)
import * as filters from '@/filters'
// console.log(filters)
// 拿到的是一个对象, 里面以 key: value 的形式储存了 过滤器名:过滤器函数
// 遍历这个对象
for (var key in filters) {
  const filterName = key
  const filterFunction = filters[key]
  Vue.filter(filterName, filterFunction)
}

// 全局混入
import { checkPermissionMixin } from '@/mixin'
Vue.mixin(checkPermissionMixin)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
